import type {ProDescriptionsItemProps} from '@/components/ProDescriptions';
import ProDescriptions from '@/components/ProDescriptions';
import React, {useEffect, useState} from 'react';
import type {DetailItem} from '../data';
import {Spin, Tag} from 'antd';
import {queryDevicePower, queryLockerDetail} from '../service';
import {getTimeDatePickerDistance} from '@/utils/time';

import {Axis, Chart, Geom, Legend, Tooltip} from 'bizcharts';
import type moment from 'moment';
import {timeChartDataGen} from '@/pages/Device/Locker/List/components/utils';

type DataType = 'flow_in';

const LockerDetail: React.FC<{
  deviceNo?: string;
  request: (id: string) => Promise<{ success: boolean; data?: DetailItem }>;
}> = ({deviceNo = ''}) => {
  const [dataCollect, setDataCollect] = useState<any[]>();
  const [detailData, setDetailData] = useState<any>();
  const [dataLoading, setDataLoading] = useState<boolean>(false);

  const [rangePickerValue] = useState<[moment.Moment, moment.Moment]>(
      getTimeDatePickerDistance('month'),
  );

  const columns: ProDescriptionsItemProps<DetailItem>[] = [
    {
      label: '设备编号',
      dataIndex: 'deviceNo',
    },
    {
      label: '状态',
      dataIndex: 'status',
      render: (_, record) =>
          record?.statusList.map(status => <Tag
              color={status?.color}>{status?.label}</Tag>),
    },
    {
      label: '状态变更时间',
      dataIndex: 'stateUpdateAt',
      render: (_, record) => record?.stateUpdateAt.label,
    },
    {
      label: '最新上报时间',
      dataIndex: 'updateAt',
      render: (_, record) => record?.updateAt.label,
    },
    {
      label: '停车区域',
      dataIndex: 'zone',
      render: (_, record) => record?.zone?.name,
    },
    {
      label: '绑定车位',
      dataIndex: 'space',
      render: (_, record) => record?.space?.spaceName,
    },
  ];

  const rtColumns: ProDescriptionsItemProps<DetailItem>[] = [
    {
      label: '信号质量',
      dataIndex: 'rssi',
    },
    {
      label: '信噪比',
      dataIndex: 'snr',
    },
    {
      label: '设备电量',
      dataIndex: 'batt',
    },
    {
      label: '温度参数',
      dataIndex: 'temp',
    },
  ];

  const keys: DataType[] = ['flow_in'];

  useEffect(() => {
    setDataLoading(true);
    queryLockerDetail({deviceNo}).then(res => {
      if (res && res.success && res.data) {
        setDetailData(res.data);
        setDataLoading(false);
      }
    });
  }, []);

  useEffect(() => {
    const collectValue = queryDevicePower({deviceNo, rangePickerValue});
    collectValue.then(res => {
      const collect = res.allOut;
      const timeOutData = timeChartDataGen(collect, keys);
      // @ts-ignore
      setDataCollect(timeOutData.flow_in);
    });
  }, [rangePickerValue]);

  const dataTransfer = (data: any[] | undefined) => data?.map(({x, y}) => ({
    x,
    type: '设备电量显示',
    y,
  }));

  return (
      <div>
        <Spin spinning={dataLoading}>
          <ProDescriptions
              title='车位锁详情'
              column={1}
              columns={columns}
              params={{deviceNo: deviceNo}}
              initData={detailData}
          />
          <ProDescriptions
              title='运行状态信息'
              column={1}
              columns={rtColumns}
              params={{deviceNo: deviceNo}}
              initData={detailData}
          />

          <Chart
              height={400}
              data={dataTransfer(dataCollect)}
              scale={{month: {range: [0, 1]}}}
              style={{marginTop: '30px'}}
              forceFit
          >
            <Legend/>
            <Axis name='x'/>
            <Axis name='collectValue'/>
            <Tooltip crosshairs={{type: 'y'}}/>
            <Geom type='line' position='x*y' size={2} color='type'
                  shape='smooth'/>
            <Geom
                type='point'
                position='x*y'
                size={4}
                shape='circle'
                color='type'
                style={{
                  stroke: '#fff', // 带边框的矩形
                  lineWidth: 1,
                }}
            />
          </Chart>
        </Spin>
      </div>
  );
};

export default LockerDetail;
